<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../../../common/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="${ctx}/js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="${ctx}/js/app/j_util.js"></script>
<script type="text/javascript" src="${ctx}/js/plugin/msgbox/jquery.dragndrop.js"></script>
<script type="text/javascript" src="${ctx}/js/plugin/msgbox/jquery.msgbox.js"></script>
<script type="text/javascript" src="${ctx}/js/plugin/pagination/jquery.pagination.js"></script>
<link rel="stylesheet" href="${ctx}/css/app/common.css" type="text/css" />
<link rel="stylesheet" href="${ctx}/js/plugin/msgbox/jquery.msgbox.css" type="text/css" />
<link rel="stylesheet" href="${ctx}/js/plugin/pagination/jquery.pagination.css" type="text/css" />
<style type="text/css">
</style>


<script type="text/javascript">
	

</script>
</head>
<body>
<form action="#">

<div id="man_zone">
<table width="99%" border="0" align="center" cellpadding="0" cellspacing="0">

 <!-- 导航 -->
  <tr>
    <td height="30">
	    <table width="100%" border="0" cellspacing="0" cellpadding="0">    	
	      <tr>
	        <td height="24" >
		        <table width="100%" border="0" cellspacing="0" cellpadding="0">
		          <tr>
		            <td>
			            <table width="100%" border="0" cellspacing="0" cellpadding="0">
				              <tr>
				                <td width="94%" valign="bottom"><span class="nav_title"> 管理人员基本信息列表</span></td>
				              </tr>
				        </table>
				    </td>
				    <td>
				    	<div align="right">
				    		<span class="oper_name">
				              &nbsp;&nbsp;<img src="${ctx}/images/app/add_12x12.png"  /> <a href="javascript:add();">添加</a>   
				              &nbsp;&nbsp; <img src="${ctx}/images/app/delete_12x12.png"  /> <a href="javascript:del();">删除</a>    
				              &nbsp;&nbsp;<img src="${ctx}/images/app/edit_12x12.png"  /> <a href="javascript:edit();">编辑 </a> 
				              &nbsp;&nbsp;<img src="${ctx}/images/app/search_16x16.gif" width="12" height="12" /> <a href="javascript:search();">查询 </a> &nbsp;&nbsp;
				              </span>
				         </div>
				     </td>
				   </tr>
			     </table>
	        </td>
	      </tr>      
	    </table>
    </td>
  </tr>
  
  
   <!-- 查询 -->
  <tr>
    <td height="30">
	    <table width="100%" border="0" cellspacing="0" cellpadding="0">    	
	      <tr>
	        <td height="24" >
		       用户名：<input type="text" name="name" class="input"/>
	        </td>
	      </tr>      
	    </table>
    </td>
  </tr>
  
  
  <!-- Grid-->
  <tr>
    <td>
    <table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#a8c7ce">
      <tr class="tr_title">
        <td width="4%">   
	          <input type="checkbox" name="checkbox" id="checkbox" onClick="checkAll(this,'checkbox2')"/> 
        </td>
        <td >用户名</td>
        <td >用户角色</td>
        <td width="14%">联系方式</td>
        <td width="16%" >IP地址</td>
        <td width="27%">详细描述</td>
        <td width="14%">基本操作</td>
      </tr>
      
      <tr class="tr2" style='CURSOR: hand' onMouseOut="this.className ='tr2'" onMouseOver="this.className ='tr1'">
        <td >
        <div align="center">
          <input type="checkbox" name="checkbox2" id="checkbox2" value="1"/>
        </div>
        </td>
        <td >admin</td>
        <td >系统管理员</td>
        <td >13913612548</td>
        <td >192.168.0.124</td>
        <td >用户可以对系统的所有操作进行管理...</td>
        <td > <a href="javascript:detail('1')">查看</td>
      </tr>
      
       <tr  class="tr2">
        <td >
        <div align="center">
          <input type="checkbox" name="checkbox2" id="checkbox2"  value="1"/>
        </div>
        </td>
        <td >admin</td>
        <td >系统管理员</td>
        <td >13913612548</td>
        <td >192.168.0.124</td>
        <td >用户可以对系统的所有操作进行管理...</td>
        <td > 查看</td>
      </tr>
      
      <tr  class="tr2">
        <td >
        <div align="center">
          <input type="checkbox" name="checkbox3" id="checkbox2" />
        </div>
        </td>
        <td >admin</td>
        <td >系统管理员</td>
        <td >13913612548</td>
        <td >192.168.0.124</td>
        <td >用户可以对系统的所有操作进行管理...</td>
        <td > 查看</td>
      </tr>
      
      
   	  </table>
    </td>
  </tr>  
</table>

<!-- page -->
<div id="mypagination" class="mypagination" style="float:right;margin-top:5px;">
</div>

</div>
</form>
<script type="text/javascript">
	
	var forms = document.forms[0];
	
	function add(){
		forms.action="form.jsp";
		forms.submit();
	}
	
	function edit(){
		var boo = isOneChecked("checkbox2");
		if(boo){
			// do something
		}else{
			$.msgbox({
		        height:150,
		        width:250,
		        content:{type:'alert', content: '只能对单一数据进行操作！'},
		        autoClose: 5,
		        onClose:function(v){
		        }
	    	});
		}
	}
	
	function del(){
		var boo = isMultiChecked("checkbox2");
		if(boo){
			$.msgbox({
		        height:150,
		        width:250,
		        content:{type:'confirm', content: '确定删除?'},
		        onClose:function(v){
		            if(v){
		            	//do something
		            	var val = getCheckboxVal("checkbox2");
		            	alert(val);
		            }
		            else {
		            	return;
		            }
		        }
		    });
		}else{
			$.msgbox({
		        height:150,
		        width:250,
		        content:{type:'alert', content: '选择数据进行操作！'},
		        autoClose: 5,
		        onClose:function(v){
		        }
	    	});
		}
		
	}
	
	
	function detail(id){
		forms.action="show.jsp";
		forms.submit();
	}
	
	
			
    $(document).ready(function(){
		 // Create pagination element
         $("#mypagination").mypagination(40,{
				perPage:10,
				currPage:1,
				callback:pageselectCallback
			});
    });
        
    function pageselectCallback(page_index){
    			
    		//	alert("当前是第"+page_index+"页");
    		    //do something
    }
</script>
</body>
</html>